// define(function(require, exports, module){
  
  import React from 'react';
  import ReactDOM from 'react-dom';
  import antd from 'antd';
  var { message, Button, InputNumber, Alert, Input } = antd;

  import View from 'jsx!./view'
  import Wrap1 from 'jsx!./wrap/1'
  import Wrap2 from 'jsx!./wrap/2'

  import hdata from 'hy5b/auto/data'
  import _ from 'lodash'

  import es6 from 'jsx!./es6'

  import SlidingTabsDemo from 'jsx!./tabs'

  function App() {
    const info = () => {
      message.info('Hello, antd!');
    };

    this.AppView = React.createClass({
      getInitialState() {
        var arr = hdata.test;
        console.log(arr.length)
        return {
          arr: arr,
          wrap: '1'
        }
      },

      change() {
        let arr = hdata.testFun();
        console.log(arr.length)
        this.setState({
          arr: arr
        })
      },

      changeWrap(wrap) {
        this.setState({
          wrap: wrap
        })
      },

      add() {
        let arr = this.state.arr;
        arr.push(hdata.testFun(1))
        console.log(arr.length)
        this.setState({
          arr: arr
        })
      },

      delete() {
        let arr = this.state.arr;
        arr.pop()
        console.log(arr.length)
        this.setState({
          arr: arr
        })
      },

      render: function () {
        var Views = _.map(this.state.arr, (v, index) => {
          return <View key={index} v={v} id={'wrap'+this.state.wrap + '-'+index} />
        })

        return (
          <div>
            <Alert message="This is a react component!" type="success" />
            
            <Button type="primary" onClick={info}>{es6().message}</Button>

            <div className='bfc'>
              <Wrap1 children={Views} arr={this.state.arr} />
              <Wrap2 children={Views} arr={this.state.arr} />
            </div>
            <div>
              <Button type="primary" onClick={this.change}>Change Data</Button>
              <Button type="primary" onClick={this.add}>Add Data</Button>
              <Button type="primary" onClick={this.delete}>Delete Data</Button>
              <Button type="primary" onClick={this.changeWrap.bind(this, '1')}>Change Wrap 1</Button>
              <Button type="primary" onClick={this.changeWrap.bind(this, '2')}>Change Wrap 2</Button>
            </div>

            <SlidingTabsDemo />
          </div>
        );
      }
    });
  }

  App.prototype.init = function (elem) {
    ReactDOM.render(<this.AppView />, elem);
  };

  export default App

// });